<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>生态树</title>
    <style>::-webkit-scrollbar{display:none;}html,body{overflow:hidden;}</style>
</head>
<body>
<div id="mountNode"></div>
<script>/*Fixing iframe window.innerHeight 0 issue in Safari*/document.body.clientHeight;</script>
<script src="https://gw.alipayobjects.com/os/antv/assets/g6/1.2.1/g6.min.js"></script>
<script src="https://gw.alipayobjects.com/os/antv/assets/lib/jquery-3.2.1.min.js"></script>
<script type="text/javascript">
    $.getJSON('/assets/data/g6-npm-ls-tiny-tree.json', data => {
        const Util = G6.Util;
    // 准备布局配置
    const layoutCfg = {
        "direction": "LR",
        "nodeSize": 20,
        "rankSep": 400,
    };
    // 自定义树节点
    const DEFAULT_NODE_SIZE = layoutCfg.nodeSize;
    G6.registerNode('treeNode', {
        draw(cfg, group) {
            const model = cfg.model;
            const r = layoutCfg.nodeSize ? layoutCfg.nodeSize / 2 : DEFAULT_NODE_SIZE;
            const shapeCfg = {
                attrs: {
                    x: cfg.x,
                    y: cfg.y,
                    r: r,
                    stroke: '#003380',
                    fill: 'white',
                    fillOpacity: 1,
                },
            };
            if (model.children && model.children.length) {
                shapeCfg.class = model.isCollapsed ? 'spreadoutButton' : 'collapseButton';
                shapeCfg.attrs.fill = '#044A9A';
                shapeCfg.attrs.stroke = '#003380';
                shapeCfg.attrs.fillOpacity = 0.4;
            }
            if (model.root) {
                shapeCfg.attrs.fill = '#044A9A';
                shapeCfg.attrs.stroke = '#003380';
                shapeCfg.attrs.fillOpacity = 0.7;
            }
            shapeCfg.attrStash = Util.mix({}, shapeCfg.attrs);
            return group.addShape('circle', shapeCfg);
        },
        afterDraw(cfg, group) {
            const model = cfg.model;
            const r = layoutCfg.nodeSize ? layoutCfg.nodeSize / 2 : DEFAULT_NODE_SIZE;
            const align = model.align;
            const labelAttrs = {
                text: model.name,
                fill: '#666',
                fontSize: 30,
                textBaseline: 'middle',
                x: cfg.x + r + DEFAULT_NODE_SIZE,
                y: cfg.y,
                textAlign: 'left',
            };
            if (align === 'R') {
                Util.mix(labelAttrs, {
                    x: cfg.x - r - DEFAULT_NODE_SIZE,
                    y: cfg.y,
                    textAlign: 'right',
                });
            } else if (align === 'T' || align === 'CH') {
                Util.mix(labelAttrs, {
                    x: cfg.x,
                    y: cfg.y + r + DEFAULT_NODE_SIZE,
                    textAlign: 'right',
                    rotate: -Math.PI / 2,
                });
            } else if (align === 'B') {
                Util.mix(labelAttrs, {
                    x: cfg.x,
                    y: cfg.y - r - DEFAULT_NODE_SIZE,
                    textAlign: 'left',
                    rotate: -Math.PI / 2,
                });
            }
            const label = group.addShape('text', {
                attrs: labelAttrs,
            });
            return label;
        }
    });

    // 生成树图实例
    const tree = new G6.Tree({
        id: 'mountNode',
        layoutFn: G6.Layouts.Dendrogram,
        layoutCfg: layoutCfg,
        height: window.innerHeight,         // 画布高
        fitView: 'autoZoom', // 自动缩放
        showButton: false
    });

    // 加载数据
    tree.source(data);
    tree.node()
            .shape('treeNode')
            .style({
                stroke: '#A9BCD3'
            });
    tree.edge().shape('VH');

    // 渲染树图
    tree.render();

    // 添加事件
    tree.on('mouseenter', ev => {
        const shape = ev.shape;
    if (shape && shape.hasClass('Button')) {
        shape.attr('fillOpacity', 0.2);
        shape.attr('strokeOpacity', 0.8);
        tree.refresh();
    }
    });
    tree.on('mouseleave', ev => {
        const shape = ev.shape;
    let attrStash;
    if (shape && shape.hasClass('Button')) {
        attrStash = shape.get('attrStash');
        shape.attr(attrStash);
        tree.refresh();
    }
    });
    });
</script>
</body>
</html>
